<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div class="box">
        <h2>{{title}}</h2>
        <input type="text" v-model="msg">{{msg}}
        <br>
        <input type="checkbox" v-model="flag">{{flag}}
        <br>
        <input type="checkbox" name="hobby" value="篮球" v-model="arr">
        <input type="checkbox" name="hobby" value="足球" v-model="arr">
        <input type="checkbox" name="hobby" value="排球" v-model="arr">
        <input type="checkbox" name="hobby" value="乒乓球" v-model="arr">
        {{arr}}
        <br>
        <input type="radio" name="sex" value="男" v-model="gender">
        <input type="radio" name="sex" value="女" v-model="gender">
        {{gender}}
        <br>
        <select v-model="city">
            <option value="上海">上海</option>
            <option value="北京">北京</option>
            <option value="深圳">深圳</option>
        </select>
        {{city}}
        <br>
    </div>
</body>
<script src="../vue.global.js"></script>
<script>
    
    const {createApp} = Vue;

    createApp({
        data(){
            return {
                title:"双向数据绑定",
                msg: "hello vue",
                flag: true,
                arr: ["排球"],
                gender: "女",
                city:"深圳"
            }
        }
    }).mount(".box");



</script>
</html>